<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5模仿骇客帝国文字矩阵效果</title>

<script type="text/javascript" src="/home/js/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="/home/css/style.css">

<style type="text/css">
	.box{
		position: absolute;
		left:500px;
		top: 200px;
		width: 50%;
		height: 200px;
		margin: 0 auto;
		background-color: rgb(255,255,255,0.8);
	}
	body{
		margin: 0;
		padding: 0;

	}
	.num1,.num2,.num3,.num4,.num5,.num6{
		display: none;
	}

	#result{
		margin-top: 15px;
		width: 100px;
		height: 150px;
		background-color: yellowgreen;
		font-size: 28px;
	}
</style>
</head>
<body>
	<div class="box">
		<form action="" method="post" >
		<select name="want" class="want">
			<option value="请选择要计算的数值" selected="selected">请选择要计算的数值</option>
			<option value="0">换汇成本</option>
			<option value="1">出口商换汇成本</option>
			<option value="2">含税采购成本</option>
			<option value="3">退税额</option>
			<option value="4">佣金</option>
			<option value="5">汇率</option>
		</select>
		<br>
	<!-- 换汇成本 -->
			<input type="text" name="zhi1"  class="num1 sss" placeholder="出口总成本(人民币)"></input>
			<span class="num1 sss">/</span>
			<input type="text" name="zhi2"  class="num1 sss" placeholder="出口外汇净收入(外币)"></input>
	<!-- 出口商换汇成本 -->
			<input type="text" name="zhi3"  class="num2 sss" placeholder="出厂所需总成本(人民币)"></input>
			<span class="num2 sss">/</span>
			<input type="text" name="zhi4"  class="num2 sss" placeholder="出口销售净收入(美元)"></input>
	<!-- 含税采购成本 -->
			<input type="text" name="zhi5"  class="num3 sss" placeholder="实际采购成本"></input>
			<span class="num3 sss">/(</span>
			<input type="text" name="zhi6"  class="num3 sss" placeholder="1"></input>
			<span class="num3 sss">+</span>
			<input type="text" name="zhi7"  class="num3 sss" placeholder="增值税率"></input>
			<span class="num3 sss">-</span>
			<input type="text" name="zhi8"  class="num3 sss" placeholder="出口退税率"></input>
			<span class="num3 sss">)*(</span>
			<input type="text" name="zhi9"  class="num3 sss" placeholder="1"></input>
			<span class="num3 sss">+</span>
			<input type="text" name="zhi10"  class="num3 sss" placeholder="增值税率"></input>
			<span class="num3 sss">)</span>
	<!-- 退税额 -->
			<input type="text" name="zhi11"  class="num4 sss" placeholder="含税采购成本"></input>
			<span class="num4 sss">/(</span>
			<input type="text" name="zhi12"  class="num4 sss" placeholder="1"></input>
			<span class="num4 sss">+</span>
			<input type="text" name="zhi13"  class="num4 sss" placeholder="增值税率"></input>
			<span class="num4 sss">)*</span>
			<input type="text" name="zhi14"  class="num4 sss" placeholder="出口退税率"></input>
	<!-- 佣金 -->
			<input type="text" name="zhi15"  class="num5 sss" placeholder="含佣价"></input>
			<span class="num5 sss">*</span>
			<input type="text" name="zhi16"  class="num5 sss" placeholder="佣金率"></input>
	<!-- 汇率 -->
			<input type="text" name="zhi17"  class="num6 sss" placeholder="出口商总成本(人民币)"></input>
			<span class="num6 sss">/</span>
			<input type="text" name="zhi8"  class="num6 sss" placeholder="FOB出口外汇净收入(美元)"></input>
		{{csrf_field()}}
		<br />
		<input type="submit" name="submit" id="btn" value="计算"></input>
		<br />
		<input type="button" name="button"  value="结果"><span id="result" ></span></input>
	</form>
	</div>
	<script src="/home/js/pace.min.js" charset="gbk"></script>
	<script type="text/javascript">
		$('.want').change(function(){
			if ($(".want").val() == '0') {
				$('.sss').hide();
				$('.num1').show();
			}
			else if ($(".want").val() == '1') {
				$('.sss').hide();
				$('.num2').show();

			}
			else if ($(".want").val() == '2') {
				$('.sss').hide();
				$('.num3').show();
			}
			else if ($(".want").val() == '3') {
				$('.sss').hide();
				$('.num4').show();
			}
			else if ($(".want").val() == '4') {
				$('.sss').hide();
				$('.num5').show();
			}
			else if ($(".want").val() == '5') {
				$('.sss').hide();
				$('.num6').show();
			}
		});
	var html = '';
	$('#btn').click(function () {
			if ($(".want").val() == '0') {
				html = $('input[name=zhi1]').val() / $('input[name=zhi2]').val();
				$('#result').html(html);
			}
			else if ($(".want").val() == '1') {
				html = $('input[name=zhi3]').val() / $('input[name=zhi4]').val();
				$('#result').html(html);
			}
			else if ($(".want").val() == '2') {
				html = $('input[name=zhi5]').val() / ($('input[name=zhi6]').val() + $('input[name=zhi7]').val() - $('input[name=zhi8]').val() ) * ( $('input[name=zhi9]').val() + $('input[name=zhi10]').val() );
				$('#result').html(html);
			}
			else if ($(".want").val() == '3') {
				html = $('input[name=zhi11]').val() / ($('input[name=zhi12]').val() + $('input[name=zhi13]').val() ) * $('input[name=zhi14]').val() ;
				$('#result').html(html);
			}
			else if ($(".want").val() == '4') {
				html = $('input[name=zhi15]').val() * $('input[name=zhi16]').val();
				$('#result').html(html);
			}
			else if ($(".want").val() == '5') {
				html = $('input[name=zhi17]').val() / $('input[name=zhi18]').val();
				$('#result').html(html);
			}
			return false;
    })
	</script>

	<script type="text/javascript" src="/home/js/index.js"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";overflow:hidden;}
</style>

<canvas id="q"></canvas>

<script type="text/javascript" >
var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split('');
var draw = function () {
	q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
	q.getContext('2d').fillRect(0,0,width,height);
	q.getContext('2d').fillStyle='#0F0';
	letters.map(function(y_pos, index){
		text = String.fromCharCode(3e4+Math.random()*33);
		x_pos = index * 10;
		q.getContext('2d').fillText(text, x_pos, y_pos);
		letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
	});
};
setInterval(draw, 33);
</script>

</body>
</html>